<template>
  <div
    ref="myChart"
    :style="{ width: '300px', height: '300px', left: '10px' }"
  ></div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import * as echarts from "echarts";

const myChart = ref<HTMLElement>();
console.log(myChart);
const myCharts = ref<any>();
setTimeout(() => {

  myCharts.value = echarts.init(myChart.value!);
  myCharts.value.setOption({
    title: { text: "总用户量", left: "center" },
    tooltip: {
      trigger: "item",
    },

    series: [
      {
        
        name: "用户量",
        type: "pie",
        radius: "70%",
        data: [
          { value: 1048, name: "a" },
          { value: 735, name: "b" },
          { value: 580, name: "c" },
          { value: 484, name: "d " },
          { value: 300, name: "e " },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 10,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });
}, 10);


</script>
